<template>
  <div class="tabs-container">
    <!-- Tab Navigation -->
    <div class="tabs">
      <div v-for="(tab, index) in tabs" :key="index" :class="['tab', { active: currentTab === index }]"
        @click="switchTab(index)">
        {{ tab.name }}
      </div>
    </div>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <!-- Tab Content -->
        <div v-for="(content, index) in tabs" :key="index" v-show="currentTab === index" class="tab-content swiper-slide">
          <component :is='tabs[index].component'></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RunDataComp from './components/RunDataComp.vue'
import PolicyDataComp from './components/PolicyDataComp.vue'
import BaseRunDataComp from './components/BaseRunDataComp.vue'
import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js'

export default {
  components: {
    RunDataComp,
    PolicyDataComp,
    BaseRunDataComp
  },
  data() {
    return {
      currentTab: 0, // 默认选中的Tab
      tabs: [
        { component: RunDataComp, name: '运行数据' },
        { component: PolicyDataComp, name: '执行策略' },
        { component: BaseRunDataComp, name: '基础信息' },
      ]
    }
  },
  mounted() {
    this.switchTab(0)
    var swiper = new Swiper(".mySwiper", {})
  },
  methods: {
    // 切换Tab
    switchTab(index) {
      this.currentTab = index
    },
    // 触摸开始事件
    startTouch(e) {
      this.startX = e.touches[0].pageX // 获取触摸开始位置
    },
    // 触摸结束事件
    endTouch(e) {
      this.endX = e.changedTouches[0].pageX // 获取触摸结束位置
      this.handleSwipe() // 处理滑动切换Tab
    },
    // 处理滑动
    handleSwipe() {
      if (this.startX - this.endX > 50) {
        // 向左滑动，切换到下一个Tab
        if (this.currentTab < this.tabs.length - 1) {
          this.currentTab += 1
        }
      } else if (this.endX - this.startX > 50) {
        // 向右滑动，切换到上一个Tab
        if (this.currentTab > 0) {
          this.currentTab -= 1
        }
      }
    }
  }
};
</script>

<style scoped>
@import url('./components/swiper/swiper-bundle.min.css');

.tabs-container {
  height: 100vh;
  overflow: hidden;
  padding: 20px;
  color: white;
  background: url(../../assets/image/lvneng/bg.png);
  padding: 0px 65px;
}

.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  padding-top: 60px;
  padding-bottom: 28px;
}

.tab {
  padding: 6px 40px;
  cursor: pointer;
  font-size: 20px;
  border-bottom: 4px solid rgba(28, 110, 196, 0.2);
  box-sizing: border-box;
}

.tab.active {
  background-color: #184788;
  color: white;
  border-bottom: 4px solid rgba(28, 110, 196, 1);
}

.tab-content {
  height: 72vh;
  background: url(../../assets/image/lvneng/border.png) 0px 0px no-repeat;
  background-size: 100% 100%;
  padding: 30px;
}
</style>
